<template>
  <div class="commentBtns">
        <h3>发表评论</h3>
        <b v-if="type">你回复&nbsp;{{name}}</b>
        <textarea name="" value="请填写评论内容" v-model="commentText" ref="commentText"></textarea>
        <button class="btn" @click="addComment">发表</button>
        <button class="btn" @click="canelComment">取消</button>
    </div>
</template>
<script>
export default {
  props: {
    type: '',
    name: ''
  },
  data () {
    return {
      commentText: ''
    }
  },
  methods: {
    addComment () {
      this.$emit('submit', this.commentText)
      this.commentText = ''
    },
    canelComment () {
      this.$emit('canel')
      this.commentText = ''
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" >
.commentBtns
  textarea
    overflow: auto
    width: 100%
    height: 90px
    outline: none
    resize: none
    font-size: 14px
  h3
    color: #634322;
    background: #e9e5df
    padding: 8px 15px
    text-align: left
    font-size: 16px
  button
    float:right
    margin-left:20px
    padding:5px 30px
    background:#01553D
    border-radius:5px
    color:#fff
    font-size:16px
  button:hover
    color:#fff
    background:#047857

</style>
